<template>
  <div class="content">
    <div class="left-box back-color-two " v-bind:style="{height:winHeight+'px',paddingTop:imgMarginTop+'px'}">
      <!--<img src="../../static/image/inde-left.png" class="imgs" alt="" v-bind:style="{top:imgMarginTop+'px'}">-->
     <div class="team_info_text">
       <h1>About</h1>
       <h2>My</h2>
       <h4>TEAM!</h4>
     </div>
    </div>
    <div class="right-box back-color-these " v-bind:style="{height:winHeight+'px',paddingTop:imgMarginTop+'px'}">
      <!--<img src="../../static/image/index-right.png" class="imgs" alt="" v-bind:style="{top:imgMarginTop+'px'}">-->
     <div class="team_info_right">
       <h1>MY TEAM'S</h1>
       <h3>我们是一个神奇的团队</h3>
       <span>We are a fantastic team</span>
       <p>我们年轻，善于发现，乐于表现，并独树一帜！
         我们是一个80后的团队，致力于互联网产品开发、WebApp、UI设计、微信服务号二次开发;</p>
       <a href="#"><span class="iconfont icon-fanhui"></span>详细信息</a>
     </div>
    </div>
  </div>
</template>
<style scoped>
body{
  background-color: #efefef;
}
</style>
<script>

  export default{
    data(){
      return {
        msg: 'hello vue',
        winHeight: window.innerHeight,
        imgMarginTop: window.innerHeight,
      }
    },
    components: {},
    mounted: function () {
      let win_height = window.innerHeight;
      let img_heigh = $('.team_info_text,.team_info_right').height();
      let img_margin = (win_height - img_heigh) / 2;
      this.imgMarginTop = img_margin;
      window.onresize = function () {
        let win_height = window.innerHeight;
        let img_heigh = $('.team_info_text,.team_info_right').height();
        let img_margin = (win_height - img_heigh) / 2;
        this.imgMarginTop = img_margin;
        this.winHeight = win_height
      }.bind(this)
    }
  }
</script>
